<template>
	<view class="comment-page">
		<!-- 页签切换 -->
		<u-tabs :list="tabList" :current="currentTab" @change="tabChange" :activeStyle="{color: '#ff2d51'}"
			:inactiveStyle="{color: '#666'}" lineColor="#ff2d51"></u-tabs>

		<!-- 评价内容区域 -->
		<swiper class="swiper-container" :current="currentTab" @change="swiperChange"
			:style="{height: swiperHeight + 'px'}">
			<!-- 待评价 -->
			<swiper-item>
				<scroll-view scroll-y :style="{height: swiperHeight + 'px'}">
					<view class="comment-list">
						<view v-for="(item, index) in List" :key="index" class="comment-card">
							<view class="card-head">
								<u-image :src="item.goodsImg" width="120rpx" height="120rpx"></u-image>
								<view class="goods-info">
									<view class="goods-name">{{item.goodsName}}</view>
									<view class="goods-spec">规格：{{item.spec}}</view>
								</view>
							</view>

							<view class="card-body">
								<view class="rate-box">
									<text>商品评分：</text>
									<u-rate :count="5" v-model="item.rate" active-color="#ff9900" size="28"></u-rate>
								</view>

								<u--textarea v-model="item.content" placeholder="说说商品的使用体验吧~" height="150" count
									maxlength="200" border="surround"></u--textarea>

								<u-upload :fileList="item.images" @afterRead="afterRead($event, index)"
									@delete="deletePic($event, index)" multiple maxCount="5" previewFullImage
									uploadText="上传图片"></u-upload>
							</view>

							<view class="card-footer">
								<u-button type="primary" shape="circle" size="small" text="提交评价"
									@click="submitComment(index)"></u-button>
							</view>
						</view>
						<!-- 加载状态 -->
						<view class="load-status" @click="loadMore" v-if="this.List.length>0">
							<u-loadmore :status="loadStatus" :icon-type="loadStatus === 'loading' ? 'circle' : 'none'" />
						</view>
						<u-empty v-if="uncomment === 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
							text="暂无待评价商品"></u-empty>
					</view>
				</scroll-view>
			</swiper-item>

			<!-- 已评价 -->
			<swiper-item>
				<scroll-view scroll-y :style="{height: swiperHeight + 'px'}">
					<view class="comment-list">
						<view v-for="(item, index) in List" :key="index" class="comment-card">
							<view class="card-head">
								<u-image :src="item.goodsImg" width="120rpx" height="120rpx"></u-image>
								<view class="goods-info">
									<view class="goods-name">{{item.goodsName}}</view>
									<view class="goods-spec">规格：{{item.spec}}</view>
									<view class="comment-time">{{item.commentTime}}</view>
								</view>
							</view>

							<view class="card-body">
								<view class="rate-box">
									<u-rate :count="5" v-model="item.rate" active-color="#ff9900" readonly
										size="28"></u-rate>
								</view>

								<view class="comment-content">{{item.content}}</view>

								<view class="image-preview" v-if="item.images.length > 0">
									<u-image v-for="(img, imgIndex) in item.images" :key="imgIndex" :src="img.url"
										width="160rpx" height="160rpx"
										@click="previewImage(item.images, imgIndex)"></u-image>
								</view>

								<view v-if="item.commentex.length>0">
									<view v-for="(v, i) in item.commentex">
										<view class="comment-content">{{'第'+v.days+'天后追加评论:'+v.addcontent}}</view>
										<view class="image-preview" v-if="v.images.length > 0">
											<u-image v-for="(img, imgIndex) in v.images" :key="imgIndex" :src="img.url"
												width="160rpx" height="160rpx"
												@click="previewImage(v.images, imgIndex)"></u-image>
										</view>
									</view>
								</view>

							</view>
						</view>
						<!-- 加载状态 -->
						<view class="load-status" @click="loadMore" v-if="this.List.length>0">
							<u-loadmore :status="loadStatus" :icon-type="loadStatus === 'loading' ? 'circle' : 'none'" />
						</view>
						<u-empty v-if="hadcomment === 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
							text="暂无评价记录"></u-empty>
					</view>
				</scroll-view>
			</swiper-item>

			<!-- 可追评 -->
			<swiper-item>
				<scroll-view scroll-y :style="{height: swiperHeight + 'px'}">
					<view class="comment-list">
						<view v-for="(item, index) in List" :key="index" class="comment-card">
							<view class="card-head">
								<u-image :src="item.goodsImg" width="120rpx" height="120rpx"></u-image>
								<view class="goods-info">
									<view class="goods-name">{{item.goodsName}}</view>
									<view class="goods-spec">规格：{{item.spec}}</view>
									<view class="comment-time">{{item.commentTime}}</view>
								</view>
							</view>

							<view class="card-body">
								<view class="rate-box">
									<u-rate :count="5" v-model="item.rate" active-color="#ff9900" readonly
										size="28"></u-rate>
								</view>

								<view class="comment-content">{{item.content}}</view>

								<view class="image-preview" v-if="item.images.length > 0">
									<u-image v-for="(img, imgIndex) in item.images" :key="imgIndex" :src="img.url"
										width="160rpx" height="160rpx"
										@click="previewImage(item.images, imgIndex)"></u-image>
								</view>

								<view v-if="item.commentex.length>0">
									<view v-for="(v, i) in item.commentex">
										<view class="comment-content">{{'第'+v.days+'天后追加评论:'+v.addcontent}}</view>
										<view class="image-preview" v-if="v.images.length > 0">
											<u-image v-for="(img, imgIndex) in v.images" :key="imgIndex" :src="img.url"
												width="160rpx" height="160rpx"
												@click="previewImage(v.images, imgIndex)"></u-image>
										</view>
									</view>
								</view>

								<view class="append-section">
									<u--textarea v-model="item.addcontent" placeholder="追加评价，说说更多使用感受~" height="120"
										count maxlength="200" border="surround"></u--textarea>

									<u-upload :fileList="item.images" @afterRead="afterRead($event, index)"
										@delete="deletePic($event, index)" multiple maxCount="9" previewFullImage
										uploadText="上传图片"></u-upload>
								</view>
							</view>

							<view class="card-footer">
								<u-button type="primary" shape="circle" size="small" text="提交追评"
									@click="submitComment(index)"></u-button>
							</view>
						</view>
						<!-- 加载状态 -->
						<view class="load-status" @click="loadMore" v-if="this.List.length>0">
							<u-loadmore :status="loadStatus" :icon-type="loadStatus === 'loading' ? 'circle' : 'none'" />
						</view>
						<u-empty v-if="addcomment === 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
							text="暂无可追评商品"></u-empty>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	import {
		httpsend
	} from '@/api/api';
	export default {
		data() {
			return {
				uncomment: 0, //待评价数量
				hadcomment: 0, //已评价数量
				addcomment: 0, //可追评数量
				loading: false,
				loadStatus: 'loadmore',
				hasMore: true,
				currentTab: 0, //当前页签
				page: 1,
				pageSize: 10,
				tabList: [{
						name: '待评价',
						badge: {
							value: 0,
						}
					},
					{
						name: '已评价',
						badge: {
							value: 0,
						}
					},
					{
						name: '可追评',
						badge: {
							value: 0,
						}
					}
				],
				swiperHeight: 0,
				List: [],
			}
		},
		onLoad() {
			this.calcSwiperHeight();
			this.getdata(0);
		},
		methods: {
			// 加载更多
			loadMore() {
				if (this.loadStatus === 'nomore') return;
				this.getdata(this.currentTab);
			},
			async getdata(type) {
				try {
					this.loading = true;
					this.loadStatus = 'loading';
					let param={
						usrid:uni.getStorageSync('usrid'),
						type:this.currentTab,
						page:this.page,
						pageSize:this.pageSize
					}
					uni.showLoading({
						title: '加载中...'
					});
					const res = await httpsend('getcomment',JSON.stringify(param));
					if (res?.code === 1) {
						//商品订单信息
						if (this.List.length == 0) {
							this.List = res.data;
						} else {
							this.List = [...this.List, ...res.data];
						}
						this.uncomment = res.uncomment;
						this.hadcomment = res.hadcomment;
						this.addcomment = res.addcomment;
						
						this.tabList[0]['badge']['value']=res.uncomment;
						this.tabList[1]['badge']['value']=res.hadcomment;
						this.tabList[2]['badge']['value']=res.addcomment;
						
						this.List=this.List.filter(item=>item.status==this.currentTab);
					} else {
						this.$api.msg(res.msg);
					}
					this.loading = false;
					uni.hideLoading();
					this.page++;
					// 模拟分页结束
					if (this.page >= 3) {
						this.hasMore = false;
						this.loadStatus = 'nomore';
					} else {
						this.loadStatus = 'loadmore';
					}
				} catch (err) {
					this.loading = false;
					uni.hideLoading();
					console.log('err', err);
				}
			},
			// 计算swiper高度
			calcSwiperHeight() {
				const systemInfo = uni.getSystemInfoSync()
				this.swiperHeight = systemInfo.windowHeight
			},

			// 页签切换
			tabChange(item) {
				this.currentTab = item.index;
				this.page=1;
				this.pageSize=10;
				this.List=[];
				this.getdata(this.currentTab);
			},

			// swiper滑动
			swiperChange(e) {
				this.currentTab = e.detail.current;
			},

			// 图片上传
			afterRead(event, index) {
				// 实际项目中这里需要调用上传接口
				const file = event.file;
				this.List[index].images.push(file.url);
			},
			// 删除图片
			deletePic(event, index) {
				this.List[index].images.splice(event.index, 1);
			},
			// 提交评价
			async submitComment(index) {
				try {
					const item = this.List[index];
					const data = {
						id: item.id,
						content: item.content,
						addcontent: item.addcontent,
						addimages: item.addimages,
						delimages: item.delimages
					}
					const result = await httpsend('submitcomment', JSON.stringify(data));
					if (result?.code === 1) {
						this.$api.msg(result.msg);
						uni.hideLoading();
						// 从待评价列表移除
						this.List.splice(index, 1);

					} else {
						this.$api.msg(result.msg);
					}

				} catch (err) {
					console.log('err', err);
				}

			},
			// 预览图片
			previewImage(urls, current) {
				uni.previewImage({
					urls: urls,
					current: current
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.comment-page {
		height: 100vh;
		background-color: #f7f7f7;
	}

	.swiper-container {
		width: 100%;
	}

	.comment-list {
		padding: 20rpx;
	}

	.comment-card {
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.card-head {
		display: flex;
		padding: 20rpx;
		border-bottom: 1rpx solid #f5f5f5;

		.goods-info {
			flex: 1;
			margin-left: 20rpx;

			.goods-name {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 10rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.goods-spec {
				font-size: 24rpx;
				color: #999;
				margin-bottom: 10rpx;
			}

			.comment-time {
				font-size: 22rpx;
				color: #999;
			}
		}
	}

	.card-body {
		padding: 20rpx;

		.rate-box {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			font-size: 26rpx;
			color: #666;
		}

		.comment-content {
			font-size: 26rpx;
			color: #333;
			line-height: 1.6;
			margin-bottom: 20rpx;
		}

		.image-preview {
			display: flex;
			flex-wrap: wrap;

			.u-image {
				margin-right: 10rpx;
				margin-bottom: 10rpx;
			}
		}

		.append-section {
			margin-top: 30rpx;
			padding-top: 20rpx;
			border-top: 1rpx dashed #eee;
		}
	}

	.card-footer {
		display: flex;
		justify-content: flex-end;
		padding: 20rpx;
		border-top: 1rpx solid #f5f5f5;
	}
</style>